<%@page pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="m" uri="http://taglibs.mobylet.org/" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<m:charset/>" />
<title>なかまちず for mixi チュートリアル</title>
<c:import url="/jsp/pc/keyword.jsp"/>
<link rel="stylesheet" type="text/css" href="/css/mixi.css" />
<style type="text/css">
  html { overflow: auto; }
  html, body, td, th { font-family: Arial, sans-serif; margin: 0px; padding: 0px; font-size: 10pt; color: #333333; }
  .text { font-family: Arial, sans-serif; margin: 0px; padding: 0px 10px; height: 100%; font-size: 10pt; color: #333333; }
  img { border: 0px; }
  form { margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 10pt; }
  input, textarea { margin: 3px 0 0 0; padding: 0; font-family: Arial, sans-serif; font-size: 10pt; }
  #side_bar { position: absolute; top: 6px; left: 620px; border: 1px solid #666; padding: 5px; line-height: 1.8; overflow:auto; background: url(/icon/white70per.png); width: 150px; height: 462px; }
  #header { background-color: #ffffff; position:absolute; top: 6px; left: 10px; z-index: 99; width: 592px; padding: 2px 4px; overflow: hidden; }
  div.errors { color: red; font-weight: bold; position: absolute; top: 35px; left: 15px; border: 1px solid #666; padding: 0px 5px; overflow:auto; background: url(/icon/white70per.png); width: 300px; height: 60px; }
  #body { background-color: #ffffff; font-size: 10pt; border: 1px solid #666; width: 763px; padding: 2px 4px; margin: 10px; }
  #help { background-color: #ffffff; font-size: 10pt; width: 759px; padding: 2px 4px; border: 3px solid #99b3cc; margin: 10px; }
  #copy { font-size: 8pt; position: absolute; top: 490px; left: 650px; }
  #footer { font-size: 8pt; position: absolute; top: 950px; left: 10px; }
  #qrcode { margin: 10px; padding: 0px; }
  #body p { margin: 5px 5px 5px 10px; }
</style>

</head>
<body>

<c:if test="${!empty errors}">
<p style="font-weight: bold; margin: 10px;">いくつかのエラーが発生しました。下記メッセージを確認してください。</p>
<ul style="color: red; font-weight: bold;">
<c:forEach var="e" items="${f:errors()}">
 <li>${f:h(e)}</li>
</c:forEach>
</ul>
</c:if>

<c:if test="${empty ret}">
<p class="indent"><a href="http://mixi.jp/run_appli.pl?id=19310" target="_top">トップページへ戻る</a></p>
</c:if>
<c:if test="${ret}">
<p class="indent"><a href="${f:h(ret)}">地図へ戻る</a></p>
</c:if>

<div id="body">
<h1>チュートリアル</h1>
<br/>

<p>
なかまちずは、地図を作る人(地図作者)と地図を見る人(閲覧者)にわかれて地図を作ります。<br/>
地図を作るために下図のように表示されている「地図を作る」リンクをクリックしてください。<br/>
</p>

<img style="border: 1px solid #000000;" src="/images/mixi/make00.jpg"/>

<p>
「地図を作る」リンクをクリックすると、空の地図が表示されます。<br/>
最初に地図作者が、ランドマークと呼ばれる目印を地図へマーキングします。<br/>
マーキングする目印は、目的地だったり、待ち合わせ場所だったり、好きなものを追加してください。<br/>
目印には、名前とコメントを書き込め、表示アイコンを選ぶことができます。<br/>
書き込んだ名前やコメントは閲覧者なら誰でも読むことができます。<br/>
表示アイコンは、パソコンで地図を見た場合のみ選択したアイコンで表示されます。<br/>
追加したランドマークは地図右のスペースに追加した順番で一覧表示されます。<br/>
</p>

<img src="/images/mixi/view01.jpg"/>

<p>
まずは、何個かランドマークを追加してみましょう。追加したランドマークは後から編集・削除することができますが、<br/>
位置を移動することはできません。位置を移動したい場合は、そのランドマークを削除して作り直してください。<br/>
ランドマークを追加したら地図へアクセスしてみます。<br/>
地図の下にある「閲覧者から見た地図」のリンクへアクセスしてみてください。<br/>
</p>

<br/>
<img src="/images/mixi/map01.jpg"/>
<p>
アクセスすると、ほとんど見た目は同じで、少し項目が少ない地図が表示されると思います。<br/>
閲覧者がmixiアプリから見る画面はこの地図になります。<br/>
この地図では、閲覧者の位置情報をランドマークのように地図をクリックすることで追加することができます。<br/>
また、「位置情報を送信する」ボタンを押すことで、現在の位置を地図上に表示することが可能です。<br/>
</p>
<p>
※パソコンの位置情報は、携帯電話などとは違い、IPアドレスや、周辺の無線LAN状況などから取得するので<br/>
あまり正確ではありません。全く関係がない場所が表示される場合や、位置情報の取得に失敗する場合もあります。<br/>
</p>

<br/>
<p>
次に、携帯電話で地図を見てみます。<br/>
閲覧者から見た地図のQRコードを読み取ってください。<br/>
</p>
<img src="/images/mixi/qrcode.jpg"/>

<p>
携帯電話で見る地図は、mixiアプリではない、外部サービスの「なかまちず」の地図になります。<br/>
このため、地図作者が地図設定で外部からのアクセスを拒否に設定していると携帯電話では見ることができません。<br/>
携帯電話で見ると下図のようになります。地図は画像ですので、パケット通信代にはお気を付けください。
</p>
<img src="/images/nakamachizu_map03.png"/>
<br/>
<p>
携帯電話で地図が見れたら、次は、友達を地図へ誘います。<br/>
メールなどで友達へ地図のURLを伝えるか、mixiアプリから地図を見てもらいます。<br/>
</p>
</div>

<c:if test="${empty ret}">
<p class="indent"><a href="http://mixi.jp/run_appli.pl?id=19310" target="_top">トップページへ戻る</a></p>
</c:if>
<c:if test="${ret}">
<p class="indent"><a href="${f:h(ret)}">地図へ戻る</a></p>
</c:if>


</body>
</html>